<template>
	<view class="page__content">
		<!-- 如果页面中的cell高度是固定不变的，则不需要设置cell-height-mode，如果页面中高度是动态改变的，则设置cell-height-mode="dynamic" -->
		<!-- 原先的v-model修改为@virtualListChange="virtualListChange"并赋值处理后的虚拟列表 -->
		<z-paging ref="paging" use-virtual-list :auto="false" :force-close-inner-list="true" cell-height-mode="dynamic"
			@virtualListChange="virtualListChange" @query="searchReport" :topZIndex="999" :bottomZIndex="10"
			:auto-show-back-to-top="backTopType">
			<template #top>
				<up-navbar :fixed="false" :title="titleName" :autoBack="true" :safeAreaInsetTop="true"
					leftIconColor="#fff">
					<template #right>
						<m-bubble type="list" :selectData="formMenus" position="right" topOpsotion="right"
							bgcRgba="#fff" color="#333" @selectFun="TapPopup">
							<up-icon name="more-dot-fill" color="#fff" class="moremenu"></up-icon>
						</m-bubble>
					</template>
				</up-navbar>

				<!-- 下拉菜单 -->
				<view class="MenuBoxMax">
					<view class="f-dc MenuBox">
						<up-dropdown ref="uDropdownRef">
							<up-dropdown-item
								v-for="row in getFilterData(formDesign,(item) => item.baseProperty.controlType == 'datepicker')"
								:rowInfo="row"
								:title="queryConditions[row.baseProperty.controlName + '_show'] || row.baseProperty.labelName"
								:key="row.colName">
								<template #desc="{element}">
									<view
										style="background-color: #f2f2f2;padding: 6px 15px;color: #999;font-size: 12px;">
										{{element.colDesc}}
									</view>
								</template>
								<m-date-time mode="picker" title="DateTitle"
									:formmat="{pickerDate:row.baseProperty.controlName}"
									:initData="DropDowmMenu_Date[row.baseProperty.controlName]"
									@confirm="onDateConfirm($event,row)" @cancel="onDateCancel">
								</m-date-time>
							</up-dropdown-item>

							<up-dropdown-item
								v-for="row in getFilterData(formDesign,(item) => item.baseProperty.controlType=='select' && item.controlProperty.select.type == 1)"
								:key="row.colName" :rowInfo="row" v-model="queryConditions[row.colName]"
								:title="MenuTitleBack(row)" :format="{label:'text',value:'value'}"
								@change="changeValue($event,row)" @reset="onResetByDropdown"
								:options="getQuerySelectColumns(row)">
								<template #desc="{element}">
									<view
										style="background-color: #f2f2f2;padding: 6px 15px;color: #999;font-size: 12px;">
										{{element.colDesc}}
									</view>
								</template>
							</up-dropdown-item>


							<template #filter>

								<view class="selectSearchDom x-c">
									<view class="selectSearchDom__filter x-c" @click="choiceParams">
										<text>筛选</text>
										<uni-icons fontFamily="CustomFontPlatform" color="#818181"
											style="position: relative; top:3rpx;"
											:size="20">{{uni.$utils.toUniCode('&#xe811;')}}</uni-icons>
									</view>
								</view>
							</template>
						</up-dropdown>

					</view>
				</view>
			</template>

			<!-- :id="`zp-id-${item.zp_index}`"和:key="item.zp_index" 必须写，必须写！！！！ -->
			<!-- :id="`zp-id-${item.zp_index}`"必须这么写，不能改动 -->
			<!-- 这里for循环的index不是数组中真实的index了，请使用item.zp_index获取真实的index -->

			<view class="page__content__main">
				<view :id="`zp-id-${item.zp_index}`" :key="item.zp_index" v-for="(item,index) in virtualList">
					<view class="common__box__list-card" style="margin-bottom: 10rpx;">
						<view class="x-bc common__box__list-card__top">
							<text class="common__box__list-card__top__left__title"
								v-if="columns.length>0">{{titleBackFun(item,columns)}}</text>

						</view>
						<view class="common__box__list-card__content x-bc" style="height: 100%;position: relative;">
							<view class="formBox" style="flex: 1;">
								<view class="common__box__list-card__content__field"
									v-for="(col) in getFilterData(columns,(ret) => !ret.isHidden && ret.colName != showFormData.colName)"
									:key="col.colName">
									<text class="common__box__list-card__content__field__label">{{col.colDesc}}:</text>
									<text
										class="common__box__list-card__content__field__value">{{item[col.colName]}}</text>
								</view>

							</view>

							<view class="y-end" style="position: absolute;right: 10rpx;bottom: 10rpx;">
								<uni-icons v-if="!isSelectedItem(item)" type="plus-filled" color="#51d0d0" :size="28"
									@click="choiceItem(item)"></uni-icons>

								<uni-icons v-else type="checkmarkempty" color="#51d0d0" :size="28"></uni-icons>


							</view>


						</view>
					</view>
				</view>
			</view>




			<template #bottom>
				<view class="page__content__bottom x-bc" :style="uni.$utils.disposeSafeBottomFun()">
					<template>
						<view class="page__content__bottom__left__num-box" @click="openSelections">
							<text>合计：</text>
							<text class="page__content__bottom__left__num-box__num">{{selections.length}}</text>
							<text>件</text>
						</view>
					</template>

					<view class="x-ec">

						<template >
							<button class="content_bottom_primary_Btn CommonBtnSize"
								@click="submitImport">确定</button>
						</template>
					</view>
				</view>

			</template>
		</z-paging>


		<!-- 筛选弹层 -->
		<uni-popup ref="popup" @close="closeSelect" type="right">
			<view class="f-dc" style="width: 80vw;height: 100%;background-color: #fff;"
				:style="uni.$utils.disposeSafeBottomFun()">
				<u-navbar :fixed="false" title="筛选" :autoBack="false" leftIcon=" " :safeAreaInsetTop="true"
					leftIconColor="#fff" style="width: 100%;">
					<view class="u-nav-slot" slot="right">
						<uni-icons color="#fff" type="close" size="30" @click="closeSelect"></uni-icons>
					</view>
				</u-navbar>
				<view class="FilterBox">
					<view class="FiledBox x-bc" style="padding: 10px 15px;"
						v-for="row in getFilterData(formDesign,(ret) => ret.baseProperty.controlType == 'textbox')"
						:key="row.baseProperty.labelName">
						<text class="FiledBox_label_x15 FiledBox_grifola"
							style="color: #333;width:100px;">{{row.baseProperty.labelName}}</text>

						<view class="x-ec" style="width:100%">
							<u--input type="text" placeholder="请输入" v-model="formData[row.baseProperty.controlName]"
								border="none" style="width:100%"
								v-if="row.baseProperty.controlType == 'textbox'"></u--input>
						</view>

					</view>
					<view class="FiledBox x-bc" style="padding: 10px 15px;"
						v-for="row in getFilterData(formDesign,(ret) => ret.baseProperty.controlType=='select' && ret.controlProperty.select.type == 3)"
						:key="row.colName">
						<text class="FiledBox_label_x15 FiledBox_grifola" style="color: #333;">{{row.colDesc}}</text>

						<view class="x-ec">
							<text class="FiledBox_value FiledBox_value_x14 FiledBox_grifola"
								style="color: #585858;">{{formData[row.colName+'_show']}}</text>
							<uni-icons type="right" size="18" color="#999"></uni-icons>
						</view>
					</view>
				</view>

				<view style="padding: 10px;background:#fff;">
					<u-row :gutter="10">
						<u-col span="6">
							<u-button text="重置"></u-button>
						</u-col>
						<u-col span="6">
							<u-button type="primary" text="确定" @click="searchReport"></u-button>
						</u-col>
					</u-row>
				</view>

			</view>
		</uni-popup>

		<!-- 选中数据弹层 -->
		<uni-popup ref="popup2" type="bottom" @close="closeSelections">
			<up-list>
				<up-list-item v-for="(item, index) in selections" :key="index">
					<up-cell :title="`${index + 1} ${item[columns[0].colName]} `">
						<template #right-icon>
							<up-icon name="trash" @click="deleteSelection(item)" color="#f00"></up-icon>
						</template>
					</up-cell>
				</up-list-item>
			</up-list>
		</uni-popup>
	</view>
</template>

<script setup lang="ts">
	import { ref, onMounted, computed, reactive, nextTick } from 'vue';
	import { onLoad, onUnload, onBackPress } from "@dcloudio/uni-app";
	import useRequestQueue from '@/uni_modules/mc-ui/libs/http/UniversalRequestQueue';
	const { request, requestByUrl, PromiseRequestByUrl, onAllComplete, onError } = useRequestQueue();
	import { useMainStore } from '@/store';
	const mainStore = useMainStore();
	let layer = uni.$utils.layer;




	interface pagingInstance {
		reload : () => void;
		refresh : () => void;
		complete : () => void;
		setLocalPaging : () => void;
	}
	let paging = ref<pagingInstance | any>(null);

	let titleName = ref("");
	//获取当前页面对象
	let importPickerSetting = reactive<any>(mainStore.ImportPickerSetting);
	titleName.value = importPickerSetting.name;



	// 气泡弹层数据
	let formMenus = ref([{
		id: 0,
		name: '开启回到顶部',
		value: false,
		// icon: 'arrow-up-fill'
	}]);
	// 定义是否开启回到顶部
	let backTopType = ref(false);
	// 气泡弹层选中事件
	function TapPopup(data : any) {
		switch (data.id) {
			case 0: // 回到顶部
				backTopType.value = !backTopType.value;
				formMenus.value[0]['name'] = (backTopType.value ? '关闭' : '开启') + '回到顶部'

				break;
			default:
				break;
		}
	}


	// 下拉菜单
	let formDesign = ref<any>([]);
	let queryConditions = reactive<any>({});
	let DropDowmMenu_Date = reactive<any>({});

	interface DropdownInstance {
		open : () => void;
		close : () => void;
		toggle : () => void;
		// 可以根据实际需要添加更多方法
	}
	let uDropdownRef = ref<DropdownInstance | any>(null);

	// 时间确认
	function onDateConfirm(payload : any, row : any) {
		if (uni.$utils.isEmpty(payload.start)) {
			if (row.baseProperty.controlName in queryConditions) {
				delete queryConditions[row.baseProperty.controlName]
			}

		} else {
			queryConditions[row.baseProperty.controlName] = payload.start
		}
		queryConditions[row.baseProperty.controlName + '_show'] = payload.start;

		DropDowmMenu_Date[row.baseProperty.controlName] = uni.$utils.deepClone(payload.start);
		console.log(DropDowmMenu_Date);

		uDropdownRef.value.close();
		paging.value.reload();
	};

	function onDateCancel() {
		uDropdownRef.value.close();
	}

	// 基础cell下拉 --title映射
	function MenuTitleBack(row : any) {
		let FilterData = getQuerySelectColumns(row).filter((item : any) => {
			return item.value == queryConditions[row.colName];
		});
		if (FilterData.length) {
			// console.log(FilterData)
			return FilterData[0]['text'];
		} else {
			// console.log(row)
			return row.colDesc || '请选择'
		}
	}
	// 基础cell下拉--change事件
	function changeValue(e ?: any, row ?: any) {
		paging.value.reload();
	};
	// 基础cell下拉--重置
	function onResetByDropdown(data : any) {
		console.log(data);
		if (queryConditions.hasOwnProperty(data.colName)) {
			delete queryConditions[data.colName];
		}
		uDropdownRef.value.close();
		paging.value.reload();
	};

	let popup = ref<popupInstance | any>(null);
	// 点击筛选按钮
	function choiceParams() {
		popup.value.open("right");
	};
	function closeSelect() {
		popup.value.close()
	}
	//获取查询下拉数据源
	function getQuerySelectColumns(row : any) {
		let MapData = row.selDetail.sqlDataSource.map(function (item : any) {
			return {
				text: item[row.selDetail.displayValue],
				value: item[row.selDetail.hiddenValue]
			}
		});
		return MapData
	}

	/**
		 * 过滤数组数据
		 * @param {Array} 过滤数组
		 * @param {Function} 过滤条件
		 * @return {Array} 返回过滤后的数据
		 */
	const getFilterData = (data : any[], filter : (ret : any) => boolean) : any[] => {
		return data.filter(filter)
	}

	// 虚拟列表数据
	let virtualList = ref<any>([]);
	function titleBackFun(item : any, comfig : any) {
		let findData = comfig.find((item : any) => !item.isHidden);

		if (uni.$utils.isEmpty(findData)) {
			return item[comfig[0].colName]
		}

		return item[findData.colName] || '';
	};
	// 选中数据
	let selections = ref<any>([]);
	interface popupInstance {
		open : () => void;
		close : () => void;
	}
	let popup2 = ref<popupInstance | any>(null);
	function openSelections() {
		if (!selections.value.length) return;
		popup2.value.open("bottom")
	};
	function closeSelections() {
		popup2.value.close()
	};
	function deleteSelection(item : any) {
		selections.value = selections.value.filter(function (obj : any) {
			return obj != item
		});
		if (selections.value.length == 0) {
			closeSelections();
		}
	};
	// 确定导入
	function submitImport() {
		if (importJs.value) {
			eval(importJs.value);
		} else {
			uni.$emit(importDataListen.value, {
				selections: selections.value,
				columns: columns.value
			});
			uni.navigateBack();
		}
	};
	function isSelectedItem(item : any) {
		if (uni.$utils.isEmpty(selections.value)) {
			// 未选中过数据
			return false
		} else {
			// 有选中数据，判断是否有相同的数据

			const filterNum = selections.value.some((row : any) => {
				return JSON.stringify(row) == JSON.stringify(item);
			});

			return filterNum
		}
	};
	// 添加
	function choiceItem(item : any) {
		if (selections.value.filter(function (obj : any) {
			return obj == item
		}).length == 0) {
			selections.value.push(item);
		}
	};

	let formData = reactive<any>({});
	let sql = ref("");
	let columns = ref<any>([]);
	let importJs = ref("")
	function searchReport() {
		uni.$utils.showLoading();
		let searchParam = [];

		Object.keys(formData).forEach(key => {

			if (key in DropDowmMenu_Date) {
				formData[key] = DropDowmMenu_Date[key]
			}
		})


		for (var key in formData) {
			searchParam.push({
				Key: key,
				Value: formData[key]
			})
		};
		requestByUrl({
			config: {
				baseURL: "/SQLData/GetDataBySql_Uniapp"
			},
			url: '',
			method: 'POST',
			data: {
				sql: sql.value,
				sqlParamStr: JSON.stringify(searchParam)
			},
			success(ret : any) {
				uni.$utils.hideLoading(1000);
				closeSelect();
				if (ret.status == 200) {
					// paging.value.complete(ret.data.ds);
					paging.value.setLocalPaging(ret.data.ds);
				} else {
					paging.value.complete(false);
				}

			}
		})

	};

	function virtualListChange(vList : any) {
		// console.log(vList);
		virtualList.value = vList;
	};


	let importDataListen = ref("importData");
	// 存储需要隐藏的标题头展示的数据
	let showFormData = reactive<any>({});
	function initConfig() {
		sql.value = importPickerSetting.sql;
		columns.value = importPickerSetting.columns;
		importJs.value = importPickerSetting.importJs;

		let findData = columns.value.find((item : any) => !item.isHidden);

		// console.log(findData)
		if (!uni.$utils.isEmpty(findData)) {
			showFormData = findData;
			Object.assign(showFormData, findData);
		}

		let rowDesignFormData = [];

		importPickerSetting.formDesign.forEach((item : any, index : any) => {
			if (item.baseProperty.defaultValue && item.baseProperty.defaultValue.indexOf('@') >= 0) {

				if (importPickerSetting.originFormData && importPickerSetting.originFormData[item.baseProperty.defaultValue.substring(1)]) {
					formData[item.baseProperty.controlName] = importPickerSetting.originFormData[item.baseProperty.defaultValue.substring(1)]
				} else {
					formData[item.baseProperty.controlName] = ""
				}
			} else {
				let DefauleData = item.baseProperty.defaultValue;

				// 如果没有默认值，切数据是日期类型
				if (uni.$utils.isEmpty(item.baseProperty.defaultValue) &&
					item.baseProperty.controlType == 'datepicker') {
					DefauleData = 'getdate()'
				}
				let backDate = getSYDefaultValue(DefauleData);
				formData[item.baseProperty.controlName] = backDate;

				if (item.baseProperty.controlType == 'datepicker') {

					let dates = uni.$utils.dateFormat(new Date(backDate), 'yyyy-MM-dd');

					let controlName = item.baseProperty.controlName;
					console.log(controlName);
					console.log(dates);
					DropDowmMenu_Date[controlName] = dates;
					queryConditions[controlName] = dates;
					queryConditions[controlName + '_show'] = dates;
					console.log(DropDowmMenu_Date);
				}
			}
		});

		formDesign.value = importPickerSetting.formDesign;

		searchReport();
	};
	//系统默认常量时间
	// 定义日期间隔类型
	type DateInterval = 's' | 'n' | 'h' | 'd' | 'w' | 'q' | 'm' | 'y';

	// 整合后的系统默认值获取方法
	const getSYDefaultValue = (funcName : string) : any => {
		// 处理日期相关函数
		if (funcName.includes("getdate()")) {
			// 基础日期对象
			let date = new Date();

			// 处理日期加减
			if (funcName !== "getdate()") {
				// 匹配日期添加模式
				const match = funcName.match(/getdate\(\)\.DateAdd\('([a-z])',\s*(-?\d+)\)/i);
				if (match && match.length === 3) {
					const interval = match[1].toLowerCase() as DateInterval;
					const number = parseInt(match[2], 10);

					// 根据间隔类型计算新日期
					switch (interval) {
						case 's':
							date = new Date(date.getTime() + (1000 * number));
							break;
						case 'n':
							date = new Date(date.getTime() + (60000 * number));
							break;
						case 'h':
							date = new Date(date.getTime() + (3600000 * number));
							break;
						case 'd':
							date = new Date(date.getTime() + (86400000 * number));
							break;
						case 'w':
							date = new Date(date.getTime() + ((86400000 * 7) * number));
							break;
						case 'q':
							date = new Date(date.getFullYear(), date.getMonth() + number * 3, date.getDate(),
								date.getHours(), date.getMinutes(), date.getSeconds());
							break;
						case 'm':
							date = new Date(date.getFullYear(), date.getMonth() + number, date.getDate(),
								date.getHours(), date.getMinutes(), date.getSeconds());
							break;
						case 'y':
							date = new Date(date.getFullYear() + number, date.getMonth(), date.getDate(),
								date.getHours(), date.getMinutes(), date.getSeconds());
							break;
					}
				}
			}

			// 格式化日期为字符串
			const seperator1 = "-";
			const seperator2 = ":";
			const month = date.getMonth() + 1 < 10 ? `0${date.getMonth() + 1}` : date.getMonth() + 1;
			const strDate = date.getDate() < 10 ? `0${date.getDate()}` : date.getDate();
			const hours = date.getHours() < 10 ? `0${date.getHours()}` : date.getHours();
			const minutes = date.getMinutes() < 10 ? `0${date.getMinutes()}` : date.getMinutes();
			const seconds = date.getSeconds() < 10 ? `0${date.getSeconds()}` : date.getSeconds();

			return `${date.getFullYear()}${seperator1}${month}${seperator1}${strDate} ${hours}${seperator2}${minutes}${seperator2}${seconds}`;
		}

		// 处理Cookie相关
		else if (funcName.includes("$.cookie")) {
			const match = funcName.match(/\$\.cookie\('([^']+)'\)/);
			if (match && match.length === 2) {
				const cookieName = match[1];
				const cookies = document.cookie.split(';');
				for (const cookie of cookies) {
					const [name, value] = cookie.trim().split('=');
					if (name === cookieName) {
						return decodeURIComponent(value);
					}
				}
			}
			return null;
		}

		// 处理自定义函数
		else if (funcName.includes('func:')) {
			try {
				const funcBody = funcName.split(':')[1];
				const func = new Function(`return (${funcBody})()`);
				return func();
			} catch (error) {
				console.error('Error executing custom function:', error);
				return null;
			}
		}

		// 处理用户信息参数
		else if (funcName.includes("@")) {
			const userInfoStr = localStorage.getItem("UserInfo");
			if (userInfoStr) {
				const userInfo = JSON.parse(userInfoStr);
				if (funcName === '@P_UserID') {
					return {
						P_UserID: userInfo.UserID || '',
						P_UserName: userInfo.UserName || ''
					};
				} else if (funcName === '@EmplID') {
					return {
						P_UserID: userInfo.EmplID || '',
						P_UserName: userInfo.UserName || ''
					};
				}
			}
			return funcName;
		}

		// 处理localStorage
		else if (funcName.includes('localStorage.getItem')) {
			const match = funcName.match(/localStorage\.getItem\('([^']+)'\)/);
			if (match && match.length === 2) {
				return localStorage.getItem(match[1]) || null;
			}
			return null;
		}

		// 默认返回原字符串
		else {
			return funcName;
		}
	};

	onLoad((option : any) => {
		// 定义导入的监听器
		if (!uni.$utils.isEmpty(option)) {
			importDataListen.value = option.listen;
		};

		// 初始化
		initConfig();
	})
</script>


<style lang="scss">
	.page__content {
		height: 100vh;
		background-color: #f2f2f2;

		&__main {}

		uni-button {
			margin-left: initial !important;
			margin-right: initial !important;
		}

		.MenuBoxMax {
			height: 42px;
			position: relative;
			width: 100%;
			border-bottom: 4px solid #f2f2f2;

			.MenuBox {
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				background-color: #fff;

				.selectSearchDom {
					padding-right: 10rpx;

					&__filter {
						border-left: 1px solid #cdcdcd;
						padding: 10px;
						color: #818181;
						font-size: 14px;
					}
				}
			}
		}

		.MainPopup {
			flex: initial !important;

			.PopupContent {
				display: flex;
				flex-direction: column;
				min-height: 240px;
				width: 90vw;
			}

			.u-transition {
				z-index: 99999 !important;
			}


			.PopupMainBox {
				padding: 12px 10px 6px;
				flex: 1;
				// overflow: auto;

				.CellBox {
					margin-bottom: 20px;

					.LeftBox {
						font-size: 14px;
						color: #999;
						margin-right: 10px;
					}
				}

				.uni-input-placeholder {
					color: #6a6a6a !important;
					font-size: 12px !important;
				}
			}

			.PopupBottomBox {
				display: flex;
				align-items: center;
				justify-content: flex-end;
				padding: 10px 10px;

				.CancelBtn {
					background-color: #fff;
					color: #51d0d0;
					border: 1px solid #51d0d0;
					min-width: 80px;
				}

				.ComfirmBtn {
					background-color: #51d0d0;
					color: #fff;
					min-width: 80px;
					margin-left: 10px !important;
				}
			}
		}

		.MainBox {
			// flex: 1;
			// overflow: auto;
			padding: 10rpx;

			// 表单1
			.u-form {
				// padding: 0px 10px;

				.u-form-item {
					background-color: #fff;
					padding: 0 16px;
				}


				.TopOption {

					.u-form-item__body {
						flex-direction: column !important;
					}
				}

				// 起止时间
				.ChoiceTimesBox {
					width: 100%;
					display: flex;
					align-items: center;
					// background-color: #fff;
					// padding: 18px 10px;
					// margin-top: 10px;

					.TimeBox {
						flex: 1;
						display: flex;
						align-items: center;
						justify-content: space-evenly;

						.timer {
							width: 100%;
							flex: 2;
							display: flex;
							flex-direction: column;
							// align-items: center;
							font-size: 16px;
							color: #333;

							text:first-child {
								margin-bottom: 10px;
								font-weight: 600;
							}

							text:last-child {
								height: 20px;
							}
						}

						.Icon {
							flex: 1;
						}
					}
				}


				// 上传-删除图标
				.u-upload__deletable {
					width: 20px;
					height: 20px;

					.u-upload__deletable__icon {
						right: -1px !important;

						.u-icon__icon {
							font-size: 20px !important;
							line-height: 16px !important;
						}
					}
				}
			}
		}

		.BottomBox {
			width: 100%;
			// height: 70px;
			// line-height: 70px;
			padding: 6px 15px;
			border-top: 1px solid #efefef;
			display: flex;
			align-items: center;
			justify-content: flex-end;
			background-color: #fff;
			// padding-bottom: constant(safe-area-inset-bottom) !important;
			// padding-bottom: env(safe-area-inset-bottom) !important;
		}

		.moremenu {
			margin-right: 10rpx;
		}

		.search {
			// background-color: #fff;
			// padding: 10rpx;


			background-color: #fff;
			background-color: #51d0d0;
			padding: 6px 10px;
		}

		.searchDom {
			width: calc(100% - 40rpx);
			float: left;
		}

		.scanQrCode {
			width: 20rpx;
			margin-right: 15rpx;
			padding: 5rpx;
			float: right;
		}

		.list {
			background-color: #999;
		}

		.bottomTool {
			background: #fff;
			padding: 15rpx;
			border-top: 2px solid #f2f2f2;
			// box-shadow: inset 0px 5px 7px -7px #878787;
			// box-shadow: 1px 0 12px -9px #333;
			// height: 100rpx;
		}

		.operTotal {
			// width: calc(100% - 300rpx);
			// float: left;
		}

		.operBtn {
			// width: 280rpx;
			// float: right;
			// padding: 10rpx;
		}

		:deep(.u-list) {
			height: 50vh !important;
			background-color: #fff;
		}

		.FilterBox {
			flex: 1;

			.FiledBox {
				position: relative;

				&::after {
					position: absolute;
					box-sizing: border-box;
					content: ' ';
					pointer-events: none;
					right: 16px;
					bottom: 0;
					left: 16px;
					border-bottom: 1px solid #ebedf0;
					-webkit-transform: scaleY(0.5);
					transform: scaleY(0.5);
				}

				&:last-child::after {
					border-bottom: none;
				}
			}
		}
	}
</style>